/* ==== v-dialog ==== */

.v-dialog__wrapper {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  margin: 0;
}

.v-dialog {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: @white;
  border-radius: @border-radius-small;
  box-shadow: @dialog-box-shadow;
  box-sizing: border-box;
  margin-bottom: 50px;

  &--tiny {
    width: @dialog-tiny-width;
  }
  &--small {
    width: @dialog-small-width;
  }
  &--large {
    width: @dialog-large-width;
  }
  &--full {
    width: 100%;
    top: 0;
    margin-bottom: 0;
    height: 100%;
    overflow: auto;
  }
  &__header {
    padding: 20px 20px 0;
    .utils-clearfix;
  }
  &__header-btn {
    float: right;
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    cursor: pointer;
    font-size: 16px;
    .v-dialog__close {
      color: @dialog-close-color;
    }
    &:focus, &:hover {
      .v-dialog__close {
        color: @dialog-close-hover-color;
      }
    }
  }

  &__title {
    line-height: 1;
    font-size: @dialog-title-font-size;
    font-weight: bold;
    color: @black;
  }

  &__body {
    padding: 30px 20px;
    color: @light-black;
    font-size: @dialog-font-size;
  }

  &__footer {
    padding: 10px 20px 15px;
    text-align: right;
    box-sizing: border-box;
  }
}

.v-dialog-fade-enter-active {
  animation: v-dialog-fade-in .3s;
}

.v-dialog-fade-leave-active {
  animation: v-dialog-fade-out .3s;
}

@keyframes v-dialog-fade-in {
  0% {
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes v-dialog-fade-out {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
}
